<template>
	<view class="umyth-Navigationbar">
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]" >
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view  class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<view @click="BackPage()" style="padding-left: 30upx;color: #fff;">
					<slot name="left" ></slot>
				</view>
				<view style="color: #fff;padding-right: 30upx;">
					<slot name="right" ></slot> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
        name: 'qk-custom',
		data() {
			return {
				StatusBar: this.$StatusBar,
				CustomBar: this.$CustomBar,
				canBack:false
			};
		},
		computed: {
			style() {
				const StatusBar= this.StatusBar;
				const CustomBar= this.CustomBar;
				const bgImage = this.bgImage;
				
				let style = this.isOpacity?`height:${CustomBar}px;padding-top:${StatusBar}px;opacity:${this.$store.getters.opv}`:`height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`
				}
				style = `${style}background:${ this.background };`
				return style
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},		
			hasLeft: {
				type: [Boolean, String],
				default: true
			},
			isOpacity: {
				type: [Boolean, String],
				default: false
			},			
			bgImage: {
				type: String,
				default: ''
			},
			isShare: {
				type: [Boolean, String],
				default: false
			},
			background: {
				type: String,
				default: '#001f3f'
			},
		},
		mounted() {
			this.StatusBar = this.$StatusBar
			this.CustomBar = this.$CustomBar
		},
		methods: {
			BackPage() {
				let page = getCurrentPages()
				if(this.isBack){
					if(page.length>1){
						uni.navigateBack({
							delta: 1
						});
					}else{
						uni.reLaunch({
						  url: '/pages/index/index'
						})
					}
				}
			},
			backHome(){
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style scoped>
  .cu-bar{
	 padding-top:20upx;
  }
  .cu-bar .left-action {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: center;
	max-width: 100%;
	width: 60px;
  }
  .cu-bar .left-action-none {
  	display: flex;
  	align-items: center;
  	height: 100%;
  	justify-content: center;
  	max-width: 100%;
  	width: 5px;
  }

  
  .qk_navbg {
      margin: 0; 
      /* width: 100%; 
      height: 100vh; */ 
      color: #fff; 
	  background: linear-gradient(45deg,#F15BB5, #9A5CE5, #01BEFF,#00F5D4); 
      background-size: 500% 500%; 
      animation: gradientBG 15s ease infinite; 
  } 
   .cu-bar .left-action:first-child {
   	margin-left: 20upx;
   }

  @keyframes gradientBG { 
      0% { 
          background-position: 0% 50%; 
      } 
      50% { 
          background-position: 100% 50%; 
      } 
      100% { 
          background-position: 0% 50%; 
      } 
  }
</style>
